<template>
  <div>

    <rose-table :data="tableData" open expand hoverSTheme="primary" lhHead="3.5" lh="3.2" titleAlign='' totalAlign="" :class-total-tr="['border-0w']"
      class="S-box border-1solid border-gray2 R20px FS09rem W100 bg-white color-gray8 ">
      <template #open="{row,index}">
        <div class=" XCC C  W100 H100 bg-white P20 S2 border-1solid border-gray3 R10px">
          {{ row }}/{{ index }}
        </div>
      </template>
      <template #expand="{row,index}">
        <div class="W100 H100 P20">{{ row }}{{ index }}</div>
      </template>
      <template #header>
        <div class=" W100 H100 P30">我是header</div>
      </template>
      <!-- 可省略title插槽,所有信息在body插槽的item属性设置(简单样式) -->

      <template #body="{row,index}">
        <rose-table-item title="ID" :value="index+1" :total="['avg']" />
        <rose-table-item title="姓名">{{row.name}}</rose-table-item>
        <rose-table-item title="年龄" :value="row.age" titleAlign="right" right totalAlign="right" :total="['sum','avg']" class=" W50px _hover-translateT10px T02s" @click="handleClickTD(row)" />
        <rose-table-item title="日期" :value="row.date" />
        <rose-table-item title="地址" :value="row.address" />

        <rose-table-item title="操作" titleAlign="center" center>

          <rose-link href="#" class=" MR10" underline theme="primary" left-icon="iconselect">
            添加
          </rose-link>

          <rose-link href="#" underline theme="danger" left-icon="iconclose">
            删除
          </rose-link>

          <!--
          <rose-button-group size="default">
            <rose-button theme="primary" outline outlight>添加新闻</rose-button>
            <rose-button theme="coffee" outline outlight>删除新闻</rose-button>
            <rose-button theme="violets" outline outlight>删除新闻</rose-button>
          </rose-button-group> -->

        </rose-table-item>

      </template>
      <template #footer>
        <div class=" W100 H100 P30">
          <rose-pagination :page-count="8" :page-current="3" class=" color-primary " :classlist-active="['bg-primary','color-white']"
            :classlist-item="[ 'border-1solid', 'border-primary', 'ML-1', 'MT-1', 'PTB10', 'PLR15','T03s' ,'_hover-bg-primary','_hover-color-white']">
            <template #up>
              上一页
            </template>
            <template #down>
              Next
            </template>
          </rose-pagination>
        </div>
      </template>
    </rose-table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          age: 18.2,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 2,
          age: 14,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          id: 3,
          age: 16.3,
          date: '2016-05-01',
          name: '张三',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          id: 4,
          age: 55,
          date: '2016-05-03',
          name: '李四',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55.5,
          date: '2016-05-03',
          name: '王林',
          address: '上海市普陀16 弄'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
